<template>
  <div
    v-loading="pageLoading"
    :element-loading-text="loadingOption.text"
    :element-loading-spinner="loadingOption.spinner"
    :element-loading-background="loadingOption.background"
    class="orderDetail_main"
  >
    <el-card shadow="never" class="card">
      <div slot="header">
        <span style="font-size: 22px" class="flexCenter">退单详情</span>
      </div>
      <!-- 退货商品 -->
      <div class="table-main">
        <div class="table-title">退货商品:</div>
        <el-table :data="productList" border style="width: 100%">
          <!-- 商品列表内容 -->
          <el-table-column label="商品图片" width="250">
            <template slot-scope="scope">
              <!-- <router-link></router-link> -->
              <img :src="scope.row.productPic" class="table_img">
            </template>
          </el-table-column>
          <el-table-column align="center" label="商品描述" width="350">
            <template slot-scope="scope">
              <p>{{ scope.row.productName }}</p>
              <p>品牌: {{ scope.row.productBrand }}</p>
            </template>
          </el-table-column>

          <el-table-column align="center" label="商品价格" width="250">
            <template slot-scope="scope">
              <p>价格: {{ scope.row.productRealPrice | money }}</p>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="productAttr"
            label="商品属性"
            width="250"
          />
          <el-table-column
            align="center"
            prop="productCount"
            label="商品数量"
            width="250"
          />

          <el-table-column align="center" prop="returnAmount" label="总计" />
        </el-table>
      </div>
      <!-- 订单信息 -->
      <div class="table-main">
        <div class="table-title">订单信息:</div>
        <TableComponent
          :table-data="orderTableData"
          :table-style="{
            width: '100%',
            margin: '30px auto',
            fontSize: '16px'
          }"
        >
          <template slot="btn">
            <el-button type="primary" size="mini" style="margin-left:10px" @click="goOrderDetail">查看信息</el-button>

          </template>
        </TableComponent>
      </div>
      <!-- 用户信息 -->
      <div class="table-main">
        <div class="table-title">用户信息:</div>
        <TableComponent
          :table-data="userTableData"
          :table-style="{
            width: '100%',
            margin: '30px auto',
            fontSize: '16px'
          }"
        />
      </div>
      <!-- 费用信息 -->
      <div style="margin-top: 20px" class="table-main">
        <div class="table-title">费用信息:</div>
        <TableComponent
          :table-data="costData"
          :table-style="{
            width: '100%',
            margin: '30px auto',
            fontSize: '16px'
          }"
        />
        <div
          v-if="status === 0"
          :style="{
            width: '100%',
            margin: '10px auto',
            fontSize: '16px'
          }"
        >
          确认退款金额:<el-input-number
            v-model="form.returnAmount"
            style="margin-left: 20px"
            placeholder=""
            size="small"
          />
        </div>
        <div
          v-if="status === 0"
          :style="{
            width: '100%',
            margin: '10px auto',
            fontSize: '16px'
          }"
        >
          处理备注:<el-input
            v-model="form.handleNote"
            class="myInput"
            type="text"
            style="margin-left: 20px"
            placeholder=""
            size="small"
          />
        </div>
        <div
          v-if="status === 1"
          :style="{
            width: '100%',
            margin: '10px auto',
            fontSize: '16px'
          }"
        >
          收货备注:<el-input
            v-model="receiveNote"
            class="myInput"
            type="text"
            style="margin-left: 20px"
            placeholder=""
            size="small"
          />
        </div>
      </div>

      <!-- 处理结果信息 -->
      <div style="margin-top: 20px" class="table-main">
        <div class="table-title">处理结果:</div>
        <TableComponent
          :table-data="resultData"
          :table-style="{
            width: '100%',
            margin: '30px auto',
            fontSize: '16px'
          }"
        />
      </div>
    </el-card>
    <div class="button_main">
      <!-- v-if="step===1" -->
      <el-button
        v-if="status===0"
        type="primary"
        style="width: 150px"
        size="small"
        @click="agreeReturn"
      >同意退款
      </el-button>
      <el-button
        v-if="status===1"
        type="primary"
        style="width: 150px"
        size="small"
        @click="receiveReturn"
      >确认收货
      </el-button>
      <el-button
        v-if="status===0"
        style="width: 150px"

        size="small"
        @click="rejectReturn"
      >拒绝退款
      </el-button>
      <!-- <el-button type="primary" size="default" ></el-button> -->
    </div>
  </div>
</template>

<script>
import orderApi from '@/api/order/index'
// import tableComponent from '@/components/tableComponent/index'
import mixin from '@/mixins/index'
export default {
    name: 'OrderBackDetail',
    // components: { tableComponent },
    mixins: [mixin],
    data() {
        return {
            pageLoading: false,
            id: '', // id
            status: -1, // 订单状态
            detailObj: {}, // 接口获取到的详情对象
            orderTableData: [], //
            userTableData: [], //
            costData: [], //
            resultData: [], //
            productList: [], // 商品数组
            statusList: [
                { name: '待处理', id: 0 },
                { name: '退货中', id: 1 },
                { name: '已完成', id: 2 },
                { name: '已拒绝', id: 3 }
            ], // 秒杀类型列表
            form: {
                returnAmount: 0,
                handleNote: ''
            }, // 拒绝或者接受备注
            receiveNote: '' // 收穫備注
        }
    },
    computed: {},
    created() {
        this.id = this.$route.params.id
        this.getDetail()
    },
    methods: {
        getDetail() {
            this.pageLoading = true
            orderApi.orderBackDetail(this.id).then((res) => {
                if (res.success) {
                    this.detailObj = res.data.orderReturnApply
                    // console.log(JSON.stringify(res))
                    this.status = this.detailObj.status
                    // 初始化商品信息
                    this.initProductTable()
                    // 初始化 订单信息
                    this.initOrderObj()
                    // 初始化 用户信息
                    this.initUserObj()
                    // 初始化 费用信息
                    this.initCostObj()
                    // 初始化 处理结果信息
                    this.initResultObj()
                }
                this.pageLoading = false
            })
        },
        // 初始化商品信息
        initProductTable() {
            const obj = {
                productPic: this.detailObj.productPic, // 商品图片
                productName: this.detailObj.productName, // 商品名字
                productAttr: this.detailObj.productAttr, // 属性
                productCount: this.detailObj.productCount, // 数量
                productBrand: this.detailObj.productBrand, // 品牌
                productRealPrice: this.detailObj.productRealPrice, // 价格
                returnAmount: this.detailObj.returnAmount // 总计
            }
            this.productList.push(obj)
        },
        // 初始化订单信息
        initOrderObj() {
            const orderObj = {
                订单编号: this.detailObj.orderSn,
                当前状态: this.statusList[this.detailObj.status].name, // 当前状态
                申请时间: this.detailObj.createTime, // 当前状态
                用户姓名: this.detailObj.receiveMan, // 当前状态
                退单理由: this.detailObj.reason // 当前状态
            }
            // orderTableData
            for (const key in orderObj) {
                this.orderTableData.push({
                    key: key,
                    value: orderObj[key]
                })
            }
        },
        // 初始化用户信息 补全 问题
        initUserObj() {
            const userObj = {
                联系人: this.detailObj.receiveMan,
                联系电话: this.detailObj.returnPhone
            }
            console.log(userObj)
            for (const key in userObj) {
                this.userTableData.push({
                    key: key,
                    value: userObj[key]
                })
            }
        },
        // 初始化用户信息 补全 问题
        initCostObj() {
            const costObj = {
                订单金额: this.detailObj.returnAmount
            }

            for (const key in costObj) {
                this.costData.push({
                    key: key,
                    value: costObj[key]
                })
            }
        },
        initResultObj() {
            const resultObj = {
                处理备注: this.detailObj.handleNote,
                处理时间: this.detailObj.handleTime,
                处理人: this.detailObj.handleMan
            }

            for (const key in resultObj) {
                this.resultData.push({
                    key: key,
                    value: resultObj[key]
                })
            }
        },
        // 同意退款
        agreeReturn() {
            orderApi.agreeReturn(this.id, {
                id: this.id,
                handleMan: this.detailObj.handleMan,
                handleNote: this.form.handleNote,
                returnAmount: this.form.returnAmount
            }).then(res => {
                console.log(res)
                if (res.success) {
                    this.$message.success('成功')
                    // window.location.reload()
                } else {
                    this.$message.error('请求失败')
                }
            })
        },
        // 确认收货
        receiveReturn() {
            orderApi.receiveReturn(this.id, {
                id: this.id,
                receiveMan: this.detailObj.receiveMan,
                receiveNote: this.receiveNote
            }).then(res => {
                console.log(res)
                if (res.success) {
                    this.$message.success('成功')
                    // window.location.reload()
                } else {
                    this.$message.error('请求失败')
                }
            })
        },
        // 拒绝退款
        rejectReturn() {
            orderApi.rejectReturn(this.id, {
                id: this.id,
                handleMan: this.detailObj.handleMan,
                handleNote: this.form.handleNote
            }).then(res => {
                console.log(res)
                if (res.success) {
                    this.$message.success('成功')
                    // window.location.reload()
                } else {
                    this.$message.error('请求失败')
                }
            })
        },
        // 跳转查看订单详情页面
        goOrderDetail() {
            this.$router.push({ name: 'orderDetail', params: { id: this.detailObj.orderId }})
        }
    }
}
</script>
<style lang="scss" scoped>
.orderDetail_main {
  min-height: 900px;
  .flexCenter {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .card {
    margin: 30px;
  }
  .table-main {
    .table-title {
      font-size: 20px;
    }
  }
  .button_main {
    margin: 40px auto;
    display: flex;
    width: 100%;
    justify-content: center;
  }
  .table_img {
    width: 100px;
    height: 100px;
  }
  .myInput {
    width: 600px;
    margin-left: 50px;
  }
}
</style>
